<template>
	<view class="mine-service">
		<view class="mine-service__title">添加客服为好友，进行在线沟通</view>
		<view class="mine-service__content">
			<view class="mine-service__qrcode">
				<image src="/static/images/service-qrcode.png" style="width: 136px; height: 136px;" show-menu-by-longpress></image>
			</view>
			<view class="mine-service__tips">长按二维码识别</view>
		</view>
		<view class="mine-service__action" @click="handleConfirmClick">
			我知道了
		</view>
	</view>
</template>

<script>
export default {
	name: 'MineService',
	methods: {
		handleConfirmClick () {
			this.$emit('confirm')
		}
	}
}
</script>

<style lang="less">
.mine-service{
	background-color: #fff;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 300px;
}
.mine-service__title{
	font-weight: 500;
	padding: 20px 20px 0;
}
.mine-service__content{
	padding: 20px;
}
.mine-service__qrcode{
	width: 136px;
	height: 136px;
	background-color: #eee;
	margin-bottom: 6px;
}
.mine-service__tips{
	font-size: 12px;
	color: #999;
	text-align: center;
}
.mine-service__action{
	border-top: 1px solid rgba(0,0,0,0.1);
	height: 54px;
	line-height: 54px;
	font-size: 17px;
	color: #576B95;
	text-align: center;
	width: 100%;
	&:active {
		background-color: rgba(0,0,0,.04);
	}
}
</style>